<template>
  <view class="income-daily">
    <view class="list">
      <view class="item" v-for="(item, index) in 5" :key="index">
        <view class="time"><text>2021-02-0{{index+1}}</text></view>
        <view class="data-box">
          <view class="c-item">
            <text class="label">我的邀请数</text>
            <text class="num"><text class="big">999</text>个</text>
          </view>
          <view class="c-item">
            <text class="label">新增好友数</text>
            <text class="num"><text class="big">99</text>个</text>
          </view>
        </view>
        <view class="data-box border-top">
          <view class="c-item">
            <text class="label">新增订单</text>
            <text class="num"><text class="big">999</text>个</text>
          </view>
          <view class="c-item">
            <text class="label">今日收益</text>
            <text class="num"><text class="big">99.99</text>个</text>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btn flex flex-ai-c flex-jc-c" @click="onSubmit">
        <text class="text">我的收益</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.income-daily{
  padding-bottom: 120rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);  
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  .list{
    overflow: hidden;
    .item{
      background-color: #fff;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
      border-radius: 10rpx;
      margin: 24rpx;
      padding: 30rpx 24rpx 0;
      .time{
        padding: 0 10rpx;
        font-size: 30rpx;
        color: #999;
      }
      .data-box{
        display: flex;
        align-items: center;
        padding: 40rpx 0;
        .c-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
          .label{
            font-size: 26rpx;
            color: #999;
          }
          .num{
            font-size: 28rpx;
            color: #333;
            margin-top: 10rpx;
            .big{
              font-size: 52rpx;
            }
          }
        }
      }
    }
    .border-top{
      border-top: 2rpx solid #eee;
    }
  }
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 0;  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);
    .btn{
      margin: 24rpx;
      height: 88rpx;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      border-radius: 44rpx;
      .text{
        font-size: 30rpx;
        color: #3d3d3d;
      }
    }
  }
}
</style>
